<template>
	<view style="width: 100%; height: 100%;">
		<baidu-map class="bm-view" :center="point" :zoom="zoom" @ready="handler" scroll-wheel-zoom="true"
			@click="clickMap">
			
			<!-- 标记 -->
			<bm-marker :position="point" :dragging="true" animation="BMAP_ANIMATION_BOUNCE">
			</bm-marker>
			
		</baidu-map>
		
		<!-- 搜索区域 -->
		<view class="search-view">
			<view style="display: flex; width: 100%;">
				<input v-model="form.keyword" class="input" style="width: 90%;" placeholder="请输入搜索的关键词"/> 
				<button style="margin: 0px; margin-left: 20px;" @click="searchHouse()">搜索</button>
			</view>
			<view>
				房屋类型：<select class="select" v-model="form.type">
					<option value="">--请选择--</option>
					<option value="1">民房</option>
					<option value="2">公寓</option>
					<option value="3">商品房</option>
				</select>
			</view>
			<view style="display: flex; align-items: center;">
				价格区间：<input v-model="form.minPrice" class="input" style="margin-right: 20px;" placeholder="最小价格"/> - 
					<input v-model="form.maxPrice" class="input" style="margin-left: 20px;" placeholder="最大价格"/>
			</view>
		</view>
		
		<!-- 结果 -->
		<view class="list-view" :style="'display:' + isshow">
			<!-- 房屋信息 -->
			<view v-for="house in searchList" class="house-view" @click="showMark(house)">
				<img class="img-cls" :src="$.getImg(house.image)">
				<view style="display: flex; flex-direction: column; height: auto; 
					justify-content: space-between;">
					<text style="width: 250px;font-size: 20px; font-weight: 900;overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;">{{house.subject}}</text>
					<text style="margin-top: -30px; color: gray;">{{house.info}}</text>
					<text style="color: red; font-weight: 900;">￥{{house.price}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isshow: "none",
				zoom: 15,
				point: {
					lng: 0, 
					lat: 0
				},
				form: {
					keyword: "",
					type: "",
					minPrice: "",
					maxPrice: ""
				},
				searchList: []
			}
		},
		methods: {
			//搜索房屋
			searchHouse(){
				this.$.ajax({
					type: "POST",
					url: "/house/search", 
					data: this.form,
					success: (result) => {
						console.log("搜索结果：", result);
						this.searchList = result;
						//展示列表
						this.isshow = "block";
					}
				});
			},
			clickMap(e) {
				console.log("点击了地图:", this.point);
			},
			//点击搜索列表
			showMark(house){
				this.point.lat = house.lat;
				this.point.lng = house.lng;
			}
		}
	}
</script>

<style>
	
	.select {
		padding: 10px 20px;
		border-radius: 10px;
		background-color: rgba(255,255,255,0.4);
		box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
		border: 0px;
		font-size: 16px;
		color: gray;
	}
	
	.bm-view {
		width: 100%;
		height: 100%;
	}
	
	.search-view {
		width: 1300px;
		height: 200px;
		background-color: rgba(255, 255, 255, 0.9);
		position: fixed;
		top: 20px;
		left: 20px;
		padding: 20px;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		justify-content: space-evenly;
	}
	
	.list-view {
		height: 100%;
		width: 500px;
		background-color: white;
		position: fixed;
		top: 0px;
		right: 0px;
	}
	
	.img-cls {
		width: 150px;
		height: 120px;
		margin-right: 10px;
		border-radius: 10px;
		box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
		border: 0px;
	}
	
	.house-view {
		display: flex;
		margin: 20px;
		padding: 15px;
		border-radius: 10px;
		box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
	}
	
	.input {
		padding: 10px 20px;
		box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
		border-radius: 10px;
	}
	
</style>
